<template>
	<view class="moreAddr">
		<view class="head">
			<view class="search">
				<image class="search-image" src="../../../static/搜索.png"></image>
				<input @focus="onFocus" @blur="onBlur" type="text" v-model="value" placeholder="输入城市名字搜索" />
				<view class="search-btn">搜索</view>
			</view>
			<view v-if="!history" class="checkScope">请选择置顶范围</view>
			<view v-else class="history-all">
				<view class="history">
					<view class="search-history" style="margin-bottom: 20rpx;">
						搜索历史
					</view>
					<image src="../../../static/垃圾桶.png"></image>
				</view>
				<view class="historyArr">
					<view v-for="(item,index) in historyArray" :key="index">
						<view class="city">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="hopCity">
			<view class="title">热门城市</view>
			<view class="all-city">
				<view v-for="(item,index) in hopCity" :key="index">
					<view v-if="index == 0" class="city" :class="tempCity.indexOf(item.value) !=-1 ||tempHopCiy.indexOf(item.value) !=-1?check:''">
						<image class="imag-search" src="../../../static/热度.png"></image>
						{{item}}
					</view>
					<view v-else class="city" :class="tempCity.indexOf(item.value) !=-1 ||tempHopCiy.indexOf(item.value) !=-1?check:''">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="hopCity" style="padding-top:0 ;">
			<view v-for="(item,index) in citys" :key="index">
				<view class="title">{{item.city}}</view>
				<view class="all-city">
					<view v-for="(item,index) in item.town" :key="index">
						<view v-if="index == 0" class="city" :class="tempCity.indexOf(item.value) !=-1 ||tempHopCiy.indexOf(item.value) !=-1?check:''">
							<image class="imag-search" src="../../../static/热度.png"></image>
							{{item.name}}
						</view>
						<view v-else class="city" :class="tempCity.indexOf(item.value) !=-1 ||tempHopCiy.indexOf(item.value) !=-1?check:''">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				hopCity: ["全国", "北京", "上海", "天津"],
				tempHopCiy: [],
				tempCity: [],
				history: false,
				historyArray: [{
					name: "全省置顶",
					value: "1001"
				}, {
					name: "池州",
					value: "1003"
				}, ],
				citys: [{
					city: "安徽",
					town: [{
						name: "全省置顶",
						value: "1001"
					}, {
						name: "安庆",
						value: "1002"
					}, {
						name: "池州",
						value: "1003"
					}]
				}, {
					city: "福建",
					town: [{
						name: "全省置顶",
						value: "1011"
					}, {
						name: "福州",
						value: "1012"
					}, {
						name: "龙岩",
						value: "1013"
					}]
				}, {
					city: "甘肃",
					town: [{
							name: "全省置顶",
							value: "1021"
						},
						{
							name: "兰州",
							value: "1022"
						}, {
							name: "白银",
							value: "1023"
						}
					]
				}, ]
			}
		},
		methods: {
			onSearch() {

			},
			onFocus() {
				this.history = true
			},
			onBlur() {
				this.history = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.moreAddr {
		background: #e1e1e1;

		.head {
			position: fixed;
			font-size: 32rpx;
			width: 100vw;
			z-index: 10;
			.historyArr{
				display: flex;
				min-height: 400rpx;
				.city{
					background: #e2e2e2;
					padding: 14rpx 20rpx;
					margin-right: 20rpx;
					border-radius: 14rpx;
				}
			}
			.search {
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 40rpx;
				position: relative;

				.search-image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 50rpx;
				}

				input {
					height: 60rpx;
					padding: 10rpx;
					padding-left: 70rpx;
					width: 64vw;
					background: #e3e3e3;
					margin-right: 20rpx;
				}

				.search-btn {
					color: #868686;
				}
			}

			.checkScope {
				padding: 20rpx 40rpx;
				background: #e1e1e1;
			}

			.history-all {
				background: #FFFFFF;
				padding: 0 20rpx;

				.history {
					display: flex;
					justify-content: space-between;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

		}

		.hopCity {
			padding: 200rpx 40rpx 40rpx 40rpx;

			.title {
				margin-bottom: 26rpx;
			}

			.all-city {
				display: flex;
				font-size: 32rpx;
				flex-wrap: wrap;

				.city {
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					margin-right: 40rpx;
					background: #FFFFFF;
					width: 182rpx;
					height: 82rpx;
					border-radius: 14rpx;
					margin-bottom: 40rpx;
					position: relative;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.check {
					color: #FFFFFF;
					background: #007AFF;
				}

				.imag-search {
					position: absolute;
					top: 0;
					left: 0;
				}
			}

		}
	}
</style>
